<template>
	<div>

		
		<!-- <div v-for="(item,index) in switchRsyncDirLogData" :key="index" class="tbrzlog">
			{{ item }}
		</div> -->
		<div id="conten">
			<div class="ABox">
				<div class="title">
					<span class="ywColor">业务机（{{ywjData.ip}}）</span>
				</div>
				<div class="topBpx">
					<div class="leftBox">
						节点状态：
					</div>
					<span class="spanDom">
						<nodeStatus :nodeIp="ywjData.ip"></nodeStatus>
					</span>
					<el-button size="mini" type="primary" plain class="ml10"
						:disabled="ywjData.machineState == 3 || bzjData.machineState == 3"
						v-show="ywjData.machineState == 1 && ywjData.GroupStatus != 'loading' && bzjData.GroupStatus != 'loading'"
						@click="repairHessGroupFn('ywj','0')">进入保障 </el-button>
					<el-button size="mini" type="success" plain class="ml10"
						:disabled="ywjData.machineState == 3 || bzjData.machineState == 3"
						v-show="ywjData.machineState == 2 && ywjData.GroupStatus != 'loading' && bzjData.GroupStatus != 'loading'"
						@click="repairHessGroupFn('ywj','1')">进入运行 </el-button>
				</div>

				<div class="cenBOx"  v-show="this.itemData.fullTransferEnabled">
					<div class="leftBox">
						数据同步：
					</div>
					<span class="spanDom2">
						<el-checkbox v-model="ywjData.isOpenflag">同步</el-checkbox>
					</span>
					<span v-show="ywjData.isOpenflag">
						<el-button size="mini" type="primary" plain class="ml10"
							:disabled="ywjData.GroupStatus == '2' || bazGroupStatus == '5'"
							v-show=" ywjData.GroupStatus != 'loading' && ywjData.isOpenflag && bzjData.GroupStatus != 'loading'"
							@click="startIncrement('ywjData',true)">同步保障机数据 </el-button>
						<el-button size="mini" type="success" plain class="ml10" :disabled="true"
							v-show="ywjData.GroupStatus == 'loading'">同步中... </el-button>
					</span>

				</div>
				
				<div class="cenBOx" v-show="ywjData.isOpenflag ">
					<div class="leftBox">
						快照：
					</div>
					<span class="bdBodyBot" >
						<el-checkbox v-model="snapshotMod">开启快照</el-checkbox>
					</span>
				</div>
				
				<div class="cenBOx" v-show="ywjData.isOpenflag">
					<div class="leftBox">
						忽略规则：
					</div>
					<span class="spanDom">
						<el-checkbox-group v-model="ywjData.ignore" class="margL15">
							<el-checkbox v-for="(item,i) in ignoreOptions" :key="i" :label="item.dictValue">
								{{item.dictLabel}}</el-checkbox>
						</el-checkbox-group>
					</span>
				</div>
				
			
				
				<div class="cenBOx" v-show="ywjData.isOpenflag">
					<p class="tipInfo">提示：将保障机（{{bzjData.ip}}）保障目录，同步到业务机（{{ywjData.ip}}）。会覆盖业务机原目录文件，请谨慎操作！</p>
				</div>
			</div>

			<div class="cenbox">
				<p>保障组状态</p>
				<p>
					<span class="pointer" v-for="(item, index) in group_status_options" :key="index"
						v-show="item.dictValue == bazGroupStatus">
						<span :style="'color:'+ item.extendVal ">{{ item.dictLabel }}</span>
					</span>
				</p>
			</div>

			<div class="BBox">
				<div class="title">
					<span class="bzColor">保障机（{{bzjData.ip}}）</span>
				</div>
				<div class="topBpx">
					<div class="leftBox">
						节点状态：
					</div>
					<span class="spanDom">
						<nodeStatus :nodeIp="bzjData.ip"></nodeStatus>
					</span>
					<el-button size="mini" type="primary" plain class="ml10"
						:disabled="ywjData.machineState == 3 || bzjData.machineState == 3"
						v-show="bzjData.machineState == 1 && ywjData.GroupStatus != 'loading' && bzjData.GroupStatus != 'loading'"
						@click="repairHessGroupFn('bzj','0')">进入保障 </el-button>
					<el-button size="mini" type="success" plain class="ml10"
						:disabled="ywjData.machineState == 3 || bzjData.machineState == 3"
						v-show="bzjData.machineState == 2 && ywjData.GroupStatus != 'loading' && bzjData.GroupStatus != 'loading'"
						@click="repairHessGroupFn('bzj','1')">进入运行 </el-button>
				</div>

				<div class="cenBOx" v-show="this.itemData.fullTransferEnabled">
					<div class="leftBox">
						数据同步：
					</div>
					<span class="spanDom2">
						<el-checkbox v-model="bzjData.isOpenflag">同步</el-checkbox>
					</span>
					<span v-show="bzjData.isOpenflag">
						<el-button size="mini" type="primary" plain class="ml10"
							:disabled="bzjData.GroupStatus == '2' || bazGroupStatus == '5'"
							v-show=" bzjData.GroupStatus != 'loading' && bzjData.isOpenflag && ywjData.GroupStatus != 'loading'"
							@click="startIncrement('bzjData',false)">同步业务机数据 </el-button>
						<el-button size="mini" type="success" plain class="ml10" :disabled="true"
							v-show="bzjData.GroupStatus == 'loading'">同步中... </el-button>
					</span>

				</div>
				<div class="cenBOx" v-show="bzjData.isOpenflag ">
					<div class="leftBox">
						快照：
					</div>
					<span class="bdBodyBot" >
						<el-checkbox v-model="snapshotMod">开启快照</el-checkbox>
					</span>
				</div>
				<div class="cenBOx" v-show="bzjData.isOpenflag">
					<div class="leftBox">
						忽略规则：
					</div>
					<span class="spanDom">
						<el-checkbox-group v-model="bzjData.ignore" class="margL15">
							<el-checkbox v-for="(item,i) in ignoreOptions" :key="i" :label="item.dictValue">
								{{item.dictLabel}}</el-checkbox>
						</el-checkbox-group>

					</span>
					
					
				</div>
				
				
				<div class="cenBOx" v-show="bzjData.isOpenflag">
					<p class="tipInfo">提示：将业务机（{{ywjData.ip}}）保障目录，同步到 保障机（{{bzjData.ip}}）。会覆盖保障机原目录文件，请谨慎操作！</p>
				</div>
			</div>
		</div>
		
		<div id="logDiv" v-show="bazGroupStatus == '5'" >
			<!-- -->
			<div>
				<div v-for="(item,index) in switchRsyncDirLogData" :key="index" v-show="index > switchRsyncDirLogData.length-3"  class="tbrzlog">
					<span v-html="item "></span>
				</div>
			</div>
			<el-button size="mini" type="success" plain class="ml10" @click="showLogInfo()">日志详情
			</el-button>
		</div>
		
		<!-- 切换日志监听 -->
		<el-dialog title="同步日志" :modal="false" :visible.sync="groupLogVisible"  width="1000px"
		 :before-close="groupLogClose">
			<div class="bdBody" id="jcrzBox">
				<el-scrollbar class="center-scrollbar">
					<div v-for="(item,index) in switchRsyncDirLogData" :key="index" class="tbrzlog">
						{{ item }}
						<span v-html="item"></span>
					</div>
					<div v-show="switchRsyncDirLogData.length == 0" class="nullLog">日志信息为空</div>
				</el-scrollbar>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="groupLogClose">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		repairHessGroup,transferDirection
	} from "@/api/console/senior";
	import {
		getAllInfo,
	} from "@/api/console/group";
	import {
		groupStatus,
	} from "@/api/console/group";

	import {
		mapGetters
	} from "vuex";

	//节点状态显示组件
	import nodeStatus from '@/views/components/simple/nodeStatus';

	import {
		nodeSystemInfo,
		switchRsyncDir,
		switchRsyncDirLog
	} from "@/api/monitor/node";

	export default {
		computed: {
			...mapGetters(["node_status_options", "group_status_options", "GroupStatus"]),
		},
		components: {
			nodeStatus,
		},
		data() {
			return {
				importantConfig: {},
				itemData: {},
				setHandleMonitorTimeout: null,
				groupId: '',
				ignoreOptions: [],
				snapshotMod:true,
				ywjData: {
					id: '',
					ip: '',
					machineState: '',
					dataFlag: false,
					isOpenflag: false,
					GroupStatus: false,
					ignore: [],
					isOpenIncrementLoding: false,
				},
				bzjData: {
					id: '',
					ip: '',
					machineState: '',
					dataFlag: false,
					isOpenflag: false,
					GroupStatus: false,
					ignore: [],
					isOpenIncrementLoding: false,
				},
				ids: '',
				repairTimeout: '',
				bazGroupStatus: '',
				getIncrementLogTime: '',
				switchRsyncDirLogData:[],
				groupLogVisible:false,
				isLinux:true,
			};
		},
		watch: {
			"GroupStatus"(newVal, oldVal) {
				this.getgroupStatus();
			}
		},
		mounted() {
			this.getDicts('hcopy_ignore').then(response => {
				this.ignoreOptions = response.data;
			})
		},
		methods: {
			initData(itemData) {
				this.isLinux = true;
			
				itemData.hessNodes.map((item) => {
					if (item.sysType == "Windows") {
						this.isLinux = false;
					}
				})
				
				this.itemData = itemData;
				this.groupId = itemData.id;
				this.ywjData.id = itemData.importantNodeId;
				this.ywjData.ip = itemData.importantNodeIp;
				this.bzjData.id = itemData.securityNodeId;
				this.bzjData.ip = itemData.securityNodeIp;
				this.ywjData.GroupStatus = '';
				this.bzjData.GroupStatus = '';
				clearTimeout(this.getIncrementLogTime)
				
				this.getAllInfoFn(itemData);
				this.repairTimeout = setInterval(() => {
					this.getAllInfoFn(itemData);
				}, 5000)
			},
			showLogInfo(){
				this.groupLogVisible = true;
			},
			groupLogClose(){
				this.groupLogVisible = false;
			},
			//修复节点状态  参数：searchId： 节点Id  securityFlag： 0.节点进入保障  1.节点进入运行
			repairHessGroupFn(type, securityFlag) {
				var formData = {};
				formData.params = {};
				var nodeIp = '';
				if (type == 'ywj') {
					formData.searchId = this.ywjData.id;
					formData.params.dataFlag = this.ywjData.dataFlag ? '1' : '0';
					nodeIp = this.ywjData.ip;
				} else if (type == 'bzj') {
					formData.searchId = this.bzjData.id;
					formData.params.dataFlag = this.bzjData.dataFlag ? '1' : '0';
					nodeIp = this.bzjData.ip;
				}
				formData.securityFlag = securityFlag;


				this.$confirm('执行节点(' + nodeIp + ')修复, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					repairHessGroup(formData).then(response => {
						this.getgroupStatus(this.itemData);
						this.getAllInfoFn(this.itemData);

						if (response.data) {
							this.msgSuccess("修复节点状态 操作成功");
						} else {
							this.$message({
								message: '修复节点状态 操作失败',
								type: 'error'
							});
						}
					})
				}).catch(() => {

				});


			},
			//同步增量
			startIncrement(dataType, flag) {
				var vue = this;
				this.$data[dataType].GroupStatus = 'loading';

				var ignore = this.$data[dataType].ignore.toString();
				
				//增加是否开启快照
				var snapshotMod = this.snapshotMod ? 's' : 'n';
				//flag（true:B2A 、false:A2B）
				switchRsyncDir({
					id: this.groupId,
					'flag': flag,
					'ignore': ignore,
					snapshotMod: snapshotMod,
				}).then(response => {
					if (response.data) {
						vue.getIncrementLog(flag,dataType);
					} else {
						this.$message({
							message: '文件同步失败',
							type: 'error'
						});
						
					}
				})

			},
			getIncrementLog( flag,dataType) {
				var vue = this;
				switchRsyncDirLog({
					id: this.groupId,
					'flag': flag,
				}).then(res => {
					if (res.data) {
						//type 1是XP，0是原有
						//xp版本会一次性返回所有的日志，不需要合并 
						if(res.data.type){
							this.switchRsyncDirLogData = res.data.log;
						}else{
							this.switchRsyncDirLogData = this.switchRsyncDirLogData.concat(res.data.log);
						}
						if (res.data.status == 'START') {
							vue.getIncrementLogTime = clearTimeout(vue.getIncrementLogTime);
							vue.getIncrementLogTime = setTimeout(function() {
								vue.getIncrementLog(flag,dataType);
							}, 3000)

						} else {
							vue.getIncrementLogTime = clearTimeout(vue.getIncrementLogTime);
						
							if (res.data.status == 'ERROR') {
								this.$message({
									message: res.data.errMsg,
									type: 'error'
								});
							} else {

								this.$message({
									message: '文件比对同步完成',
									type: 'success'
								});
								this.ywjData.GroupStatus = '';
								this.bzjData.GroupStatus = '';
							}

						}

					}
				})
			},
			getAllInfoFn(itemData) {
				var vue = this;
				getAllInfo({
					'id': itemData.id
				}).then(response => {
					vue.bazGroupStatus = response.data.groupStatus;
					// console.log(vue.bazGroupStatus,vue.getIncrementLogTime)
					if(vue.bazGroupStatus == 5 && !vue.getIncrementLogTime){
						
						vue.transferDirectionFn(itemData)
					}
				});
			},
			//查询同步中 同步切换传输方向
			transferDirectionFn(itemData){
				var vue = this;
				transferDirection({
					'id': itemData.id
				}).then(response => {
					// console.log(response)
					if(response.data !== null){
						vue.getIncrementLog(response.data);
						if(response.data){
							this.ywjData.isOpenflag = true;
							this.ywjData.GroupStatus = 'loading';
						}else{
							this.bzjData.isOpenflag = true;
							this.bzjData.GroupStatus = 'loading';
						}
					}else{
						console.error('服务没有传输方向的缓存');
					}
				});
				// vue.getIncrementLog(false);
			},
			//定时获取节点最新的状态		
			//1.业务机运行 2.保障机运行 3.切换中 4.脑裂 5.数据同步中 0.未知
			getgroupStatus() {

				var vue = this;
				let item;
				if (JSON.stringify(this.GroupStatus) == '{}') {
					vue.ywjData.machineState = '';
					vue.bzjData.machineState = '';
					return false;
				}

				
				 //机器在运行中
				 //机器在保障中
				 //机器在切换状态
				for (item in this.GroupStatus) {
					if (item == this.ywjData.ip) {
						vue.ywjData.machineState = this.GroupStatus[item].machineState;
					} else if (item == this.bzjData.ip) {
						vue.bzjData.machineState = this.GroupStatus[item].machineState;
					}
				}


			},


		}
	}
</script>

<style scoped="scoped">
	#conten {
		display: flex;
		justify-content: space-between;
	}

	#conten>div {
		width: 420px;
		height: 340px;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		padding: 10px;
	}

	#conten>.cenbox {
		width: 100px;
		margin-top: 20px;
		border: 0;
		text-align: center;
	}

	.title {
		text-align: center;
		padding: 10px;
		font-size: 16px;
	}

	.spanDom {
		display: inline-block;
		width: 200px;
	}

	.spanDom2 {
		display: inline-block;
		width: 164px;
	}

	.ywColor {
		color: #67c23a;
	}

	.topBpx {
		margin-top: 20px;
	}

	.bzColor {
		color: #1890ff
	}

	.ml10 {
		margin-left: 10px;
	}

	.cenBOx {
		margin-top: 20px;
	}

	.leftBox {
		display: inline-block;
		width: 80px;
		text-align: right;
	}

	.rightSpan {
		display: inline-block;
		width: 100px;
	}

	.tipInfo {
		color: #5e5e5e;
		padding: 0 10px;
	}

	#logDiv {
		width: 100%;
		display: flex;
		border: 1px solid #e3e3e3;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 20px;
	}

	#logDiv>div {
		flex: auto;
	}
</style>
